<template>
	<div class="wrap">
		<div class="floor-main-wrap gg-prtrol-pos">
			<div class="gg-structure">
				<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-long-dialog">
					<div class="gg-prober-header clearfix">
						<div class="gg-prober-header--info">
							<span class="gg-prober-h5" id="deviceTitle">消防水池</span>
							<a class="gg-online-item"><span id="onlineState"></span></a>
							<a class="gg-prober-location" id="deviceTitle1" title="佛山市老干部活动中心1层配电房">佛山市老干部活动中心1层配电房</a>
						</div>
					</div>
					<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentState">正常</span></a></div>
					<div class="gg-prober-body">
						<div class="gg-prober-content">
							<div class="gg-switch-content">
								<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
									<a class="gg-btn-capsule is-active">设施信息</a>
									<a class="gg-btn-capsule" name="accidRecord">异常记录</a>
								</div>
								<div class="gg-prober-model">
									<div class="gg-prober-unit" style="display: block;">
										<!--设施信息 列表-->
										<div class="gg-prober-device-list">
											<div class="gg-prober-device">
												<span class="gg-probe-cell">主机回路点位: </span>
												<span class="gg-probe-cell"><a class="gg-probe-unit-item" id="loop">--</a></span>
											</div>
											<div class="gg-prober-device">
                                                <span class="gg-probe-cell">设备ID：</span>
                                                <span class="gg-probe-cell" id="deviceId">GDFS_LGBHDZX20200103_C_j16</span>
                                            </div>
											<div class="gg-prober-device">
												<span class="gg-probe-cell">设施品牌：</span>
												<span class="gg-probe-cell"><a class="gg-probe-unit-item" id="deviceBrand">深圳泰科TK83G80K5T5</a></span>
											</div>
											<div class="gg-prober-device">
												<span class="gg-probe-cell">ID/SN/序列号：</span>
												<span class="gg-probe-cell" id="controlHost">--</span>
											</div>
										</div>
									</div>
									<div class="gg-prober-unit">
										<!--异常记录 列表-->
										<ul class="gg-probe-list scroll-normal" id="deviceAccident"></ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="toggle-warnNum-dialog">监测装置<span class="ggicon-back" style="transform: rotate(-90deg);"></span></div>
			<div class="gg-warnNum-long-dialog add-prober-pos add-warnNum-dialog" style="display: block;">
				<ul id="add_deviceUnit" class="add_deviceUnit">
					<li class="add-unit-active">监测装置1</li>
				</ul>
				<div class="add-prober-header">
					<div class="gg-prober-header--info"><span class="gg-prober-h5" id="add_deviceTitle">水位传感器</span>
						<a class="gg-online-item"><span id="add_onlineState">在线</span></a>
						<a class="gg-prober-location"><span id="add_deviceTitle1" title="佛山市老干部活动中心1层配电房" class="add-device-info">佛山市老干部活动中心1层配电房</span></a>
                    </div>
				</div>
				<div class="add-prober-body">
					<div class="gg-prober-content">
						<div class="gg-switch-content">
							<div class="gg-prober-group"><a class="gg-prober-group-alert gg-abnormal-item"><span id="currentM_alert">3.6</span>m</a></div>
							<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
                                <a class="add-btn-capsule add-is-active" name="m">水位曲线</a>
                                <a class="add-btn-capsule">设施信息</a>
                                <a class="add-btn-capsule" name="accidRecord">异常记录</a>
                            </div>
						</div>
						<div class="gg-prober-model">
							<div class="add-prober-unit" style="display: block;">
								<div class="add-capuse-time"><a class="gg-capuse-time--item is-active" id="7">近一周</a>
                                    <a class="gg-capuse-time--item" id="24">24小时</a>
                                </div>
								<!--水位 折线图-->
								<div class="gg-probe-chart" id="deviceWaterLevel" _echarts_instance_="ec_1588062737456">
                                    
								</div>
							</div>
							<div class="add-prober-unit">
								<div class="gg-prober-device-list">
									<div class="gg-prober-device">
                                        <span class="gg-probe-cell">设备ID：</span>
                                        <span class="gg-probe-cell add-device-info" id="add_deviceId">GDFS_LGBHDZX20200103_C_w16</span>
                                    </div>
									<div class="gg-prober-device"><span class="gg-probe-cell">设施品牌：</span>
                                        <span class="gg-probe-cell add-device-info" id="add_deviceBrand">深圳泰科TK83G80K5T5</span>
                                    </div>
									<div class="gg-prober-device"><span class="gg-probe-cell">ID/SN/序列号：</span>
                                        <span class="gg-probe-cell add-device-info" id="add_controlHost">868681049637315</span>
                                    </div>
								</div>
							</div>
							<div class="add-prober-unit">
								<!--异常记录 列表-->
								<ul class="gg-probe-list scroll-normal" id="add_deviceAccident">
									<li class="abli"><span class="abli-text">设备正常</span><span class="abli-date">2020-04-11 18:19:57</span></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	/* eslint-disable */ // eslist 不检测
	import $Service from "../services/main";
	import $ from "jquery";
	import special_device_type from "../assets/data/special_device_type.json";
	//监测装置
	let waterPumpCode = special_device_type.waterPump;
	let smokeMonitor = special_device_type.smokeMonitorCode; //烟感
	let fireDoor = special_device_type.fireDoor; //防火门
	//水箱 水池 水泵
	let waterTank = special_device_type.fireWaterTank;
	let waterPool = special_device_type.fireWaterPool;
	let waterPump = special_device_type.fireWaterPump;
	let waterEnd = special_device_type.fireHydrant_end; //末端
	//消火栓
	let hydrantIndoor = special_device_type.fireHydrant_indoor;
	let hydrantOutUp = special_device_type.fireHydrant_outUp;
	let hydrantOutDown = special_device_type.fireHydrant_outDown;

	export default {
		name: 'FireHydrant',
		data() {
			return {
				myMap: {},
				popupHtml: '',
				unitId: "440604YZDW201912310001",
				buildId: "440604YZDW201912310001_001",
				deviceId: 'GDFS_LGBHDZX20200103_C_j2',
			}
		},
		mounted() {
			this.mapInit();
		},
		methods: {
			mapInit() {
				let data = {
					"deviceTypePid": "02000000",
					"deviceTypeId": "02060000",
					"laMake": "0",
					"twoCode": "00001006",
					"latitude": "2289149.0900000000",
					"locationAddress": "",
					"deviceTime": "2020-01-08 17:31:21",
					"deviceId": "GDFS_LGBHDZX20200103_C6",
					"deviceName": "点型感烟",
					"mapY": "",
					"mapX": "",
					"deviceAddress": "排练室",
					"isCTerminal": 0,
					"controlHost": "801463",
					"monitoringObject": "",
					"laPoint": "6",
					"floorName": "1层",
					"longitude": "1770617.1700000000",
					"buildName": "佛山市老干部活动中心",
					"locationName": "",
					"deviceTypeName": "点型感烟探测器",
					"list1": "",
					"list2": "",
					"runState": "0",
					"laLoop": "1",
					"onlineState": 1
				};

				let deviceTypeId = data["deviceTypeId"];
				let status = "";
				if (data["runState"] == "1") {
					status = "报警";
				} else if (data["runState"] == "2") {
					status = "故障";
				} else {
					status = "正常";
				}

				this.deviceInfoFn(this.deviceId)
				this.popupHtml = this.iot_facility(this.deviceId, '', '');



				//电器火灾探测器弹窗面板 选项卡点击事件
				var prober_btn = $(".gg-prober-content .gg-btn-capsule");
				var prober_unit = $(".gg-prober-model .gg-prober-unit");

				//物联网设备 选项卡点击事件
				$(".add-btn-capsule").click(function() {
					$(".add-btn-capsule").removeClass("add-is-active");
					$(this).addClass("add-is-active");
					$(".add-prober-unit").hide();
					var capsure_click = $(this).index();
					$(".add-prober-unit")
						.eq(capsure_click)
						.show();
				});

				//物联网监测装置显隐
				let olPopupW = $(".olPopup").width();
				$(".toggle-warnNum-dialog").click(function() {
					// 重新设置弹框宽度
					if ($(".add-warnNum-dialog").is(":hidden")) {
						$(".olPopup").width(olPopupW * 2);
					} else {
						$(".olPopup").width(olPopupW);
					}

					$(".toggle-warnNum-dialog .ggicon-back").css(
						"transform",
						"rotate(90deg)"
					);
					$(".add-warnNum-dialog").toggle();
					if ($(".add-warnNum-dialog").is(":visible")) {
						$(".toggle-warnNum-dialog .ggicon-back").css(
							"transform",
							"rotate(-90deg)"
						);
						if (that.MonitoringObject === "") {
							$Service
								.getMonitoringObject(that, {
									unitId: that.unitId,
									deviceId: deviceId
								})
								.then(res => {
									if (res.code === "success") {
										var data = res.data;
										that.monitoringDevice(data);
									}
								});
						} else {
							$Service
								.getMonitoringObject(that, {
									unitId: that.unitId,
									deviceId: deviceId
								})
								.then(res => {
									if (res.code === "success") {
										var data = res.data;
										that.monitoringDevice(data);
									}
								});
						}
					}
				});

				prober_unit.eq(0).show();
				if (deviceTypeId == "19050000") {
					if ($(this).index() == 1) {
						$(".gg-capuse-time").show();
					} else {
						$(".gg-capuse-time").hide();
					}
				}

				prober_btn.click(function() {
					alert(123)
					prober_btn.removeClass("is-active");
					prober_unit.removeClass("is-active");
					$(this).addClass("is-active");

					if ($(this).attr("name") == "accidRecord") {
						//加载异常记录列表  查询前四条 传递0
						if (deviceTypeId != fireDoor) {
							that.deviceAccidentInfo(deviceId);
						}
					}

					prober_unit.hide();
					prober_unit.eq($(this).index()).show();

					//sheshi
					if (deviceTypeId == "19050000") {
						if ($(this).index() == 1) {
							$(".gg-capuse-time").show();
						} else {
							$(".gg-capuse-time").hide();
						}
					} else if (
						deviceTypeId == "19020000" ||
						deviceTypeId == "19030000" ||
						deviceTypeId == "19080000"
					) {
						if ($(this).index() == 0) {
							$(".gg-capuse-time").show();
						} else {
							$(".gg-capuse-time").hide();
						}
					} else if (
						deviceTypeId == "19150000" ||
						deviceTypeId == waterPumpCode
					) {
						if ($(this).index() == 0) {
							$(".gg-capuse-time").show();
						} else {
							$(".gg-capuse-time").hide();
						}
					} else if (deviceTypeId == smokeMonitor) {
						if ($(this).index() == 0) {
							$(".gg-capuse-time").show();
						} else {
							$(".gg-capuse-time").hide();
						}
					}
				});

				//电流与温度
				var gg_ele_btn = $(".gg-ele-btn");
				var gg_tem_btn = $(".gg-tem-btn");
				var gg_liu_btn = $(".gg-liu-btn");
				var gg_ya_btn = $(".gg-ya-btn");
				var capuse_time = $(".gg-capuse-time .gg-capuse-time--item");
				gg_ele_btn.click(function() {
					$(this).css("color", "#3c8dbc");
					$(this).css("borderBottom", "2px solid #3c8dbc");
					$(this)
						.siblings()
						.css("color", "#a5a5a5");
					$(this)
						.siblings()
						.css("borderBottom", "0");
					$(".gg-chart-tem").hide();
					$(".gg-chart-liu").hide();
					$(".gg-chart-ya").hide();
					$(".gg-chart-ele").show();
				});
				gg_tem_btn.click(function() {
					$(this).css("color", "#3c8dbc");
					$(this).css("borderBottom", "2px solid #3c8dbc");
					$(this)
						.siblings()
						.css("color", "#a5a5a5");
					$(this)
						.siblings()
						.css("borderBottom", "0");
					$(".gg-chart-ele").hide();
					$(".gg-chart-liu").hide();
					$(".gg-chart-ya").hide();
					$(".gg-chart-tem").show();
				});
				gg_liu_btn.click(function() {
					$(this).css("color", "#3c8dbc");
					$(this).css("borderBottom", "2px solid #3c8dbc");
					$(this)
						.siblings()
						.css("color", "#a5a5a5");
					$(this)
						.siblings()
						.css("borderBottom", "0");
					$(".gg-chart-ele").hide();
					$(".gg-chart-liu").show();
					$(".gg-chart-ya").hide();
					$(".gg-chart-tem").hide();
				});
				gg_ya_btn.click(function() {
					$(this).css("color", "#3c8dbc");
					$(this).css("borderBottom", "2px solid #3c8dbc");
					$(this)
						.siblings()
						.css("color", "#a5a5a5");
					$(this)
						.siblings()
						.css("borderBottom", "0");
					$(".gg-chart-ele").hide();
					$(".gg-chart-liu").hide();
					$(".gg-chart-ya").show();
					$(".gg-chart-tem").hide();
				});
			},

			//装置弹出设备
			iot_facility(deviceTypeId, list1, list2) {
				var tooltipTemplate = '<div class="floor-main-wrap gg-prtrol-pos"><div class="gg-structure"><!--装置 面板-->';
				switch (deviceTypeId) {
					case hydrantIndoor: //消火栓
					case hydrantOutUp:
					case hydrantOutDown:
					case "01010000": //电气火灾
					case "01020000": //供电末端配电箱
					case "01030000": //末端配电箱切换装置
					case waterTank: //水箱
					case waterPool:
					case waterPump:
					case waterEnd:
					case "19150000": //水位
					case waterPumpCode: //泵
					case "19020000": //室内水压监测
					case "19030000": //室外水压监测
					case "19050000":
					case "19080000": //喷淋末端
					case "19210000": //感烟
					case fireDoor: //防火门
					case "05100000": //水压传感器（非独立式）
					case "05100100": //室内消火栓系统水压传感器（非独立式）
					case "05100200": //室外消火栓系统水压传感器（非独立式）
					case "05100300": //自动喷水灭火系统水压传感器（非独立式）
					case "05110000": //水位传感器（非独立式）
						tooltipTemplate +=
							'<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-long-dialog">';
						break;
					default:
						tooltipTemplate +=
							'<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-short-dialog">';
						break;
				}

				tooltipTemplate +=
					`<div class="gg-prober-header clearfix">
                                        <div class="gg-prober-header--info">
                                            <span class="gg-prober-h5" id="deviceTitle"></span>
                                            <a class="gg-online-item"><span id="onlineState"></span></a>
                                            <a class="gg-prober-location" id="deviceTitle1" title=""></a>
                                        </div>
                                    </div>
                                    <div class="gg-prober-body">
                                        <div class="gg-prober-content">
                                            <div class="gg-switch-content">`;
				//设备类型电气火灾监控装置 显示 实时电流电温
				//设备类型 室内水压监测装置  室外水压加测装置 显示实时水压
				var tooltipTemplate_capsule = "";
				var tooltipTemplate_unit = "";

				//兼容旧设备类型弹框默认样式
				var other_capsule = '<a class="gg-btn-capsule">设施信息</a>',
					other_capsule_div = '<div class="gg-prober-unit">';

				switch (deviceTypeId) {
					case "19020000": //室内消火栓水压监测装置  室外
					case "19030000": //室外消火栓水压监测装置  室内
					case "05100000": //水压传感器（非独立式）
					case "05100100": //室内消火栓系统水压传感器（非独立式）
					case "05100200": //室外消火栓系统水压传感器（非独立式）
					case "05100300": //自动喷水灭火系统水压传感器（非独立式）
					case "19080000": //喷淋末端自动试水装置   末端
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentMpa">--</span>MPa</a></div>';
						tooltipTemplate_capsule =
							'<a class="gg-btn-capsule is-active" name="mpa">水压曲线</a>';
						tooltipTemplate_unit =
							'<div class="gg-prober-unit"><!--水压 折线图--><div class="gg-probe-chart" id="deviceWater"></div></div>';
						break;
						//配电箱
					case "19050000": //电气火灾监控装置
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentState">正常</span></a></div>';
						tooltipTemplate_capsule =
							'<a class="gg-btn-capsule is-active">实时读数</a><a class="gg-btn-capsule" name="ma">监测曲线</a>';
						tooltipTemplate_unit =
							`<div class="gg-prober-unit">
                                <div class="gg-prober-unit__table">
                                    <table><thead><th width="50%">对象</th><th width="50%">实时值</th></thead></table>
                                </div>
                                <div class="gg-scroll-tbody scroll-normal"><table><tbody id="curData"></tbody></table></div>
                                </div>
                                <div class="gg-prober-unit">
                                    <div class="gg-probe-chart">
                                        <div class="gg-probe-chart__btn">
                                            <a class="gg-ele-btn">剩余电流</a>
                                            <a class="gg-tem-btn">线缆温度</a>
                                            <a class="gg-liu-btn">相电流</a>
                                            <a class="gg-ya-btn">相电压</a>
                                        </div><!--剩余电流 折线图-->
                                    <div class="gg-chart-ele" id="deviceMa"></div>
                                    <div class="gg-chart-tem" id="deviceTem"></div>
                                    <div class="gg-chart-liu" id="deviceLiu"></div>
                                    <div class="gg-chart-ya" id="deviceYa"></div>
                                </div></div>`;
						break;
					case "19150000": //水位传感器  消防水池水箱
					case "19180000": //消防泵启停监测装置  消防泵
					case "05110000": //水位传感器（非独立式）
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentM">--</span>m</a></div>';
						tooltipTemplate_capsule =
							'<a class="gg-btn-capsule is-active" name="m">水位曲线</a>';
						tooltipTemplate_unit =
							'<div class="gg-prober-unit"><!--水位 折线图--><div class="gg-probe-chart" id="deviceWaterLevel"></div></div>';
						break;
					default:
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-normal-item"><span id="currentState">正常</span></a></div>';
						other_capsule = '<a class="gg-btn-capsule is-active">设施信息</a>';
						other_capsule_div =
							'<div class="gg-prober-unit" style="display: block;">';
						break;
				}

				//面板胶囊按钮
				tooltipTemplate +=
					'<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">' +
					tooltipTemplate_capsule;

				tooltipTemplate +=
					other_capsule +
					'<a class="gg-btn-capsule" name="accidRecord">异常记录</a></div>';

				if (deviceTypeId !== "19120000") {
					tooltipTemplate +=
						`<div class="gg-capuse-time">
                                            <a class="gg-capuse-time--item is-active" id="7">近一周</a>
                                            <a class="gg-capuse-time--item"  id="24">24小时</a>
                                        </div>`;
				}
				tooltipTemplate += "</div>";
				tooltipTemplate +=
					'<div class="gg-prober-model">' +
					tooltipTemplate_unit +
					other_capsule_div +
					'<div class="gg-prober-device-list">';
				tooltipTemplate +=
					`<div class="gg-prober-device">
                                        <span class="gg-probe-cell">主机回路点位：</span>
                                        <span class="gg-probe-cell"><a class="gg-probe-unit-item" id="loop"></a></span>
                                    </div>
                                    <div class="gg-prober-device"><span class="gg-probe-cell" >设备ID：</span><span class="gg-probe-cell" id="deviceId"></span></div>
                                    <div class="gg-prober-device">
                                        <span class="gg-probe-cell">设施品牌：</span>
                                        <span class="gg-probe-cell" ><a class="gg-probe-unit-item" id="deviceBrand"></a></span>
                                    </div>
                                    <div class="gg-prober-device">
                                        <span class="gg-probe-cell" >ID/SN/序列号：</span>
                                        <span class="gg-probe-cell" id="controlHost"></span>
                                    </div></div></div>
                                    <div class="gg-prober-unit"><!--异常记录 列表-->
                                        <ul class="gg-probe-list scroll-normal" id="deviceAccident"></ul>
                                    </div></div></div></div></div>`;
				if (list1 !== "" || list2 !== "") {
					tooltipTemplate +=
						'<div class="toggle-warnNum-dialog">消防设施<span class="ggicon-back"></span></div>';
				}

				//装置拼接
				tooltipTemplate +=
					`<div class="gg-warnNum-long-dialog add-prober-pos add-warnNum-dialog">
                        <ul id="add_deviceUnit" class="add_deviceUnit"></ul>
                        <div class="add-prober-header">
                            <div class="gg-prober-header--info">
                                <span class="gg-prober-h5" id="add_deviceTitle">暂无设备</span>
                                <a class="gg-online-item"><span id="add_onlineState"></span></a>
                                <a class="gg-prober-location"><span id="add_deviceTitle1" title="" class="add-device-info">找不到设备</span></a>
                            </div>
                            <div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentState_alert">正常</span></a></div>
                        </div>
                        <div class="add-prober-body">
                        <div class="gg-prober-content">
                        <div class="gg-switch-content">
                            <div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
                                <a class="add-btn-capsule add-is-active">设施信息</a>
                                <a class="add-btn-capsule" name="accidRecord">异常记录</a></div>
                            </div>
                        <div class="gg-prober-model">
                        <div class="add-prober-unit" style="display: block;"><!--设施信息 列表-->
                        <div class="gg-prober-device-list">
                        <div class="gg-prober-device"><span class="gg-probe-cell">设备ID：</span><span class="gg-probe-cell add-device-info" id="add_deviceId"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">设施品牌：</span><span class="gg-probe-cell add-device-info" id="add_deviceBrand"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">ID/SN/序列号：</span><span class="gg-probe-cell add-device-info" id="add_controlHost"></span></div>
                        </div></div>
                        <div class="add-prober-unit"><!--异常记录 列表--><ul class="gg-probe-list scroll-normal" id="add_deviceAccident"></ul></div></div></div></div>
                        </div></div>
                    </div>`;
				return tooltipTemplate;
			},

			//物联网设备弹出装置
			iot_device(deviceTypeId, list1, list2) {
				var tooltipTemplate =
					'<div class="floor-main-wrap gg-prtrol-pos"><div class="gg-structure">';
				var other_template = "";
				switch (deviceTypeId) {
					case "01010000":
					case waterTank:
					case waterEnd:
					case waterPool:
					case waterPump:
					case "19150000": //水位
					case waterPumpCode: //泵
					case hydrantIndoor:
					case hydrantOutUp:
					case hydrantOutDown:
					case "19050000":
					case "19020000": //室内水压监测
					case "19030000": //室外水压监测
					case smokeMonitor:
					case "19080000": //喷淋末端
					case "01020000": //供电末端配电箱
					case "01030000": //末端配电箱切换装置
						tooltipTemplate +=
							'<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-long-dialog">';
						other_template =
							'<div class="gg-warnNum-long-dialog add-prober-pos add-warnNum-dialog">';
						break;
					default:
						tooltipTemplate +=
							'<div class="gg-warnNum-dialog gg-prober-pos gg-warnNum-short-dialog">';
						other_template =
							'<div class="gg-warnNum-short-dialog add-prober-pos add-warnNum-dialog">';
						break;
				}
				let isRoad = "";
				switch (deviceTypeId) {
					case "03010100":
					case "03010200":
					case "03010300":
					case "03010400":
					case "03010500":
					case "03010600":
					case "03020000":
						// isRoad
						isRoad = "主机回路点位通道: ";
						break;
					default:
						// isRoad
						isRoad = "主机回路点位: ";
						break;
				}
				tooltipTemplate +=
					`<div class="gg-prober-header clearfix">
                                        <div class="gg-prober-header--info">
                                            <span class="gg-prober-h5" id="deviceTitle"></span>
                                            <a class="gg-online-item"><span id="onlineState"></span></a>
                                            <a class="gg-prober-location" id="deviceTitle1" title=""></a>
                                        </div>
                                    </div>
                                    <div class="gg-prober-group"><a class="gg-normal-item"><span id="currentState">正常</span></a></div>
                                    <div class="gg-prober-body">
                                        <div class="gg-prober-content">
                                            <div class="gg-switch-content">
                                                <div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">
                                                    <a class="gg-btn-capsule is-active">设施信息</a>
                                                    <a class="gg-btn-capsule" name="accidRecord">异常记录</a>
                                                </div>
                                                <div class="gg-prober-model">
                                                    <div class="gg-prober-unit"><!--设施信息 列表-->
                                                        <div class="gg-prober-device-list">
                                                            <div class="gg-prober-device">
                                                                <span class="gg-probe-cell">` +
					isRoad +
					`</span>
                                                                <span class="gg-probe-cell"><a class="gg-probe-unit-item" id="loop"></a></span>
                                                            </div>
                                                            <div class="gg-prober-device"><span class="gg-probe-cell" >设备ID：</span><span class="gg-probe-cell" id="deviceId"></span></div>
                                                            <div class="gg-prober-device">
                                                                <span class="gg-probe-cell" >设施品牌：</span>
                                                                <span class="gg-probe-cell" ><a class="gg-probe-unit-item" id="deviceBrand"></a></span>
                                                            </div>
                                                            <div class="gg-prober-device">
                                                                <span class="gg-probe-cell" >ID/SN/序列号：</span>
                                                                <span class="gg-probe-cell" id="controlHost"></span>
                                                            </div></div></div>
                                                            <div class="gg-prober-unit"><!--异常记录 列表-->
                                                                <ul class="gg-probe-list scroll-normal" id="deviceAccident"></ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div></div>`;
				if (list1 !== "" || list2 !== "") {
					// isList
					tooltipTemplate += '<div class="toggle-warnNum-dialog">监测装置<span class="ggicon-back"></span></div>';
				}

				tooltipTemplate +=
					other_template +
					`<ul id="add_deviceUnit" class="add_deviceUnit"></ul>
                    <div class="add-prober-header">
                    <div class="gg-prober-header--info"><span class="gg-prober-h5" id="add_deviceTitle">暂无装置</span>
                    <a class="gg-online-item"><span id="add_onlineState"></span></a>
                    <a class="gg-prober-location"><span id="add_deviceTitle1" title="" class="add-device-info">找不到装置</span></a></div></div>
                    <div class="add-prober-body">
                    <div class="gg-prober-content">
                    <div class="gg-switch-content">`;

				var tooltipTemplate_capsule = "";
				var tooltipTemplate_unit = "";

				//兼容旧设备类型弹框默认样式
				var other_capsule = '<a class="add-btn-capsule">设施信息</a>',
					other_capsule_div = '<div class="add-prober-unit">';

				switch (deviceTypeId) {
					case hydrantIndoor: //消火栓
					case hydrantOutUp:
					case hydrantOutDown:
					case "19020000":
					case "19030000":
					case waterEnd:
					case "19080000": //喷淋末端
						// moDuan
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentMpa_alert">--</span>MPa</a></div>';
						tooltipTemplate_capsule =
							'<a class="add-btn-capsule add-is-active" name="mpa">水压曲线</a>';
						tooltipTemplate_unit =
							'<div class="add-prober-unit" style="display: block;"><div class="add-capuse-time"><a class="gg-capuse-time--item is-active" id="7"></a><a class="gg-capuse-time--item" id="24"></a></div><!--水压 折线图--><div class="gg-probe-chart" id="deviceWater"></div></div>';
						break;
					case "01010000": //电气火灾
					case "19050000":
					case waterPumpCode: //泵
					case "01020000": //供电末端配电箱
					case "01030000": //末端配电箱切换装置
						// dianQi
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentState_alert">正常</span></a></div>';
						tooltipTemplate_capsule =
							'<a class="add-btn-capsule add-is-active">实时读数</a><a class="add-btn-capsule" name="ma">监测曲线</a>';
						tooltipTemplate_unit =
							`<div class="add-prober-unit想·想·" style="display: block;">
                                <div class="gg-prober-unit__table">
                                    <table><thead><th width="50%">对象</th><th width="50%">实时值</th></thead></table>
                                </div>
                                <div class="gg-scroll-tbody scroll-normal">
                                    <table><tbody id="curData"></tbody></table>
                                </div>
                            </div>
                            <div class="add-prober-unit">
                                <div class="add-capuse-time">
                                    <a class="gg-capuse-time--item is-active" id="7">近一周</a>
                                    <a class="gg-capuse-time--item"  id="24">24小时</a>
                                </div>
                                <div class="gg-probe-chart">
                                    <div class="gg-probe-chart__btn">
                                        <a class="gg-ele-btn">剩余电流</a>
                                        <a class="gg-tem-btn">线缆温度</a>
                                        <a class="gg-liu-btn">相电流</a>
                                        <a class="gg-ya-btn">相电压</a>
                                    </div><!--剩余电流 折线图-->
                                    <div class="gg-chart-ele" id="deviceMa"></div>
                                    <div class="gg-chart-tem" id="deviceTem"></div>
                                    <div class="gg-chart-liu" id="deviceLiu"></div>
                                    <div class="gg-chart-ya" id="deviceYa"></div>
                                </div>
                            </div>`;
						break;
					case waterTank: //水箱
					case waterPool:
					case waterPump:
					case "19150000":
						// waters
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentM_alert">--</span>m</a></div>';
						tooltipTemplate_capsule =
							'<a class="add-btn-capsule add-is-active" name="m">水位曲线</a>';
						tooltipTemplate_unit =
							'<div class="add-prober-unit" style="display: block;"><div class="add-capuse-time"><a class="gg-capuse-time--item is-active" id="7">近一周</a><a class="gg-capuse-time--item"  id="24">24小时</a></div><!--水位 折线图--><div class="gg-probe-chart" id="deviceWaterLevel"></div></div>';
						break;
					default:
						// others
						tooltipTemplate +=
							'<div class="gg-prober-group"><a class="gg-prober-group-alert"><span id="currentState_alert">正常</span></a></div>';
						other_capsule =
							'<a class="add-btn-capsule add-is-active">设施信息</a>';
						other_capsule_div =
							'<div class="add-prober-unit" style="display: block;">';
						break;
				}

				tooltipTemplate += '<div class="gg-btn-capsuleGroup gg-btn-capsuleInline gg-prober-capsule">' +
					tooltipTemplate_capsule + other_capsule +
					'<a class="add-btn-capsule" name="accidRecord">异常记录</a></div></div>' +
					'<div class="gg-prober-model">' +
					tooltipTemplate_unit +
					other_capsule_div +
					`<div class="gg-prober-device-list">
                        <div class="gg-prober-device"><span class="gg-probe-cell">设备ID：</span><span class="gg-probe-cell add-device-info" id="add_deviceId"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">设施品牌：</span><span class="gg-probe-cell add-device-info" id="add_deviceBrand"></span></div>
                        <div class="gg-prober-device"><span class="gg-probe-cell">ID/SN/序列号：</span><span class="gg-probe-cell add-device-info" id="add_controlHost"></span></div>
                    </div></div>
                    <div class="add-prober-unit"><!--异常记录 列表--><ul class="gg-probe-list scroll-normal" id="add_deviceAccident"></ul></div></div></div></div>
                    </div></div>
                    </div>`;
				return tooltipTemplate;
			},


			// 查询设备的基本信息
			deviceInfoFn(deviceId) {
				let that = this;
				$Service
					.getMoniterDevice(this, {
						unitId: this.unitId,
						deviceId: deviceId
					})
					.then(res => {
						if (res.code === "success") {
							let data = res.data;
							var brand = data.brand == null ? "" : data.brand; //品牌
							var model = data.model == null ? "" : data.model; //型号
							var vender =
								data.vender == null || data.vender == "null" ? "" : data.vender; //厂商
							var deviceTypeName =
								data.deviceTypeName == null ? "" : data.deviceTypeName;
							var deviceId = data.deviceId == null ? "" : data.deviceId;
							that.MonitoringObject = data.monitoringObject;

							var buildName = data.buildName == null ? "" : data.buildName; //楼栋名称
							var floorName = data.floorName == null ? "" : data.floorName; //楼层名称
							var deviceAddress =
								data.deviceAddress == null ? "" : data.deviceAddress; //具体地址
							var laLoop = data.laLoop == null ? "" : data.laLoop; //回路
							var laPoint = data.laPoint == null ? "" : data.laPoint; //点位
							var controlHost = data.controlHost == null ? "" : data.controlHost; //ID/SN/序列号
							var cardNo = data.cardno == null ? "" : data.cardno; //nb卡号
							var module = data.module == null ? "" : data.module; //模组
							var installDate = data.installDate == null ? "" : data.installDate; //安装日期
							var onlineState =
								"" + data.onlineState == "1" ?
								"在线" :
								"" + data.onlineState == "0" ?
								"离线" :
								"未接入"; //设备是否在线 1 在线 0  离线
							var deviceTypeId = data.deviceTypeId; //设备类型id

							$("#deviceId").html(deviceId);
							$("#deviceBrand").html(brand + model || "--");
							$("#deviceTypeName").html(deviceTypeName + deviceId);
							$("#deviceInfo").html(vender + brand + model || "--");
							$("#controlHost").html(controlHost || "--");
							$("#deviceTitle").html(deviceTypeName);
							$("#deviceModule").html(module || "--");
							$("#deviceNB").html(cardNo || "--");
							$("#installDate").html(installDate || "--");

							var title1 = "";
							if (data.isCTerminal === 1) {
								title1 = (data.homeAddress || "") + deviceAddress;
							} else {
								title1 = buildName + floorName + deviceAddress;
							}
							$("#deviceTitle1").html(title1);
							$("#deviceTitle1").attr("title", title1);

							switch (deviceTypeId) {
								case "19010000":
								case "19020000":
								case "19030000":
								case "19050000":
								case "19080000":
								case "19120000":
								case "19150000":
								case "19210000":
								case "19220000":
								case "19230000":
									if (onlineState == "离线" || onlineState == "未接入") {
										$("#onlineState").parent().removeClass("gg-online-item").addClass("gg-outline-item");
										$(".gg-prober-body .gg-prober-group").hide();
									}
									$("#onlineState").html(onlineState); //设备在线状态
									break;
							}

							switch (deviceTypeId) {
								case "03010100":
								case "03010200":
								case "03010300":
								case "03010400":
								case "03010500":
								case "03010600":
								case "03020000":
									$("#loop").html(
										(data.laMake == null ? "" : data.laMake) + "-" + (laLoop == null ? "" : laLoop) + "-" + (laPoint == null ?
											"" : laPoint) + "-" + data.channelNum
									);
									break;
								default:
									$("#loop").html(
										(data.laMake == null ? "" : data.laMake) +
										"-" +
										(laLoop == null ? "" : laLoop) +
										"-" +
										(laPoint == null ? "" : laPoint)
									);
									break;
							}
						}
					});
			},


			// 设备的故障列表
			deviceAccidentInfo(deviceId) {
				$Service.getExceptionRecord(this, {
					unitId: this.unitId,
					deviceId: deviceId
				}).then(res => {
					if (res.code === "success" && res.data.length > 0) {
						var html = "";
						var abnormalData = res.data;
						for (var i = 0; i < abnormalData.length; i++) {
							// 根据deviceTypeId判断是否显示异常值，后端暂未构建
							switch (abnormalData[i].deviceTypeId) {
								case "03010100":
								case "03010200":
								case "03010300":
								case "03010400":
								case "03010500":
								case "03010600":
									html +=
										'<li class="abli"><span class="abli-text">' +
										(abnormalData[i].faultDescribe || "--") +
										(abnormalData[i].warningValue == null ? "" : ",") +
										"<span>" +
										(abnormalData[i].warningValue == null ?
											"" :
											abnormalData[i].warningValue) +
										'</span></span><span class="abli-date">' +
										(abnormalData[i].deviceTime ?
											abnormalData[i].deviceTime :
											"--") +
										"</span></li>";
									break;
								default:
									html +=
										'<li class="abli"><span class="abli-text">' +
										(abnormalData[i].faultDescribe || "--") +
										'</span><span class="abli-date">' +
										(abnormalData[i].deviceTime ?
											abnormalData[i].deviceTime :
											"--") +
										"</span></li>";
									break;
							}
						}
						$("#deviceAccident").html(html);
						$(".abli-text span").css("color", "red");
					} else {
						$("#deviceAccident").html("暂无数据");
					}
				});
			},

		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>
